<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">    
    <title>22-24</title>
    <link rel="stylesheet" href="css/css.css">
</head>
<body>
    <p>数字操作练习</p>
    <!-- mission1 -->
    <div class="mission">
        <div id="input-group">
            <label>Number A:<input id="radio-a" type="radio" name="math-obj" value="a"></label><input id="num-a" type="text">
            <label>Number B:<input id="radio-b" type="radio" name="math-obj" value="b"></label><input id="num-b" type="text">
        </div>
        <div id="Button-group">
            <!-- if(A||B){if(!isNaN){var isNum = true;}} -->
            <button data-func="isNum">判断当前选中的输入框输入内容是否为数字</button>
            <!-- Number(A).toFixed(B) -->
            <button data-func="roundAbyB">把 A 四舍五入为 B 个小数位数的数字</button>
            <!-- Math.abs(A||B) -->
            <button data-func="toabs">当前选中数字的绝对值</button>
            <!-- Math.ceil(A||B) -->
            <button data-func="toceil">对当前选中的数字进行上舍入</button>
            <!-- Math.floor(A||B) -->
            <button data-func="tofloor">对当前选中的数字进行下舍入</button>
            <!-- Math.round(A||B) -->
            <button data-func="toround">把当前选中的数字四舍五入为最接近的整数</button>
            <!-- Math.max(A,B) -->
            <button data-func="tomax">返回 A 和 B 中的最高值</button>
            <!-- Math.min(A,B) -->
            <button data-func="tomin">返回 A 和 B 中的最低值</button>
        </div>
        <p class="result_with_style"  id="result"></p>
    </div>


    <p>字符串操作练习</p>
    <!-- mission2 -->
    <div class="mission">
        <div id="input-group-2"
            <label>String A:
                <input id="radio-a-2" type="radio" checked="true" name="str-obj" value="a">
            </label>
            <textarea id="str-a-2" rows="2"></textarea>
            <label>String B:
                <input id="radio-b-2" type="radio" name="str-obj" value="b">
            </label>
            <textarea id="str-b-2"  rows="2"></textarea>        
            <label>Num A：<input id="num-a-2" type="number" value="0"></label>
            <label>Num B：<input id="num-b-2" type="number" value="1"></label>
        </div>
        <div  id="Button-group-2">
            <!-- str.length  -->
            <button data-func="get-strlength">获取当前选中输入的内容长度</button>
            <!--  stringObject.charAt(index)  -->
            <button data-func="get-strnumber3">当前选中输入中的第3个字符</button>
            <!--  stringObject.concat(stringX,stringX,...,stringX)  -->
            <button data-func="str-concat">把两个输入框的文字连接在一起输出（concat）</button>
            <!--  stringObject.indexOf(searchvalue,fromindex) when false -> -1  -->
            <button data-func="BindexOfA">输入B中的内容，在输入A的内容中第一次出现的位置（indexOf）</button>
            <!--  stringObject.lastIndexOf(searchvalue,fromindex)  -->
            <button data-func="A-lastIndexOf-B">输入A中的内容，在输入B的内容中最后一次出现的位置（lastIndexOf）</button>
            <!-- stringObject.slice(start,end)  -->
            <button data-func="slice-by-ab">使用slice获取选中输入框内容的部分内容，参数为num-a及num-b</button>
            <!-- scrollHeight / height -->
            <button data-func="get-lines">当前选中输入框的行数</button>
            <!-- stringObject.substr(start,length) -->
            <button data-func="get-substr">使用substr获取选中输入框内容的子字符串，参数为num-a及num-b</button>
            <!-- stringObject.toLocaleUpperCase() -->
            <button data-func="to-upper">把所选输入框中的内容全部转为大写</button>
            <!-- stringObject.toLocaleLowerCase()  -->
            <button data-func="to-lower">把所选输入框中的内容全部转为小写</button>
            <!-- stringObject.replace(regexp/substr,replacement)  -->
            <button data-func="str-ipblank">把所选输入框中内容的半角空格全部去除</button>
            <!-- stringObject.replace(regexp/substr,replacement)  -->
            <button data-func="replace-a">把所选输入框中内容的a全部替换成另外一个输入框中的内容</button>
        </div>
        <p class="result_with_style"  id="result-2"></p>
    </div>

    <p>字符串练习-去除首尾空格</p>
    <!-- 尝试改进属性命名方式 -->
    <!-- mission3 -->
    <div class="mission">
        <label for="name-strpro-input">输入需要处理的字符串：</label>
        <input id="id-strpro-input" class="long-input" type="text" name="name-strpro-input">
        <button id="id-strpro-button">开始处理</button>
        <p class="result_with_style"  id="id-strpro-result"></p>
    </div>

    <p>字符串练习-去除重复字符</p>
    <!-- mission4 -->
    <div class="mission">
        <label for="name-strpro2-input">输入需要处理的字符串：</label>
        <input id="id-strpro2-input"  class="long-input" type="text" name="name-strpro2-input">
        <button id="id-strpro2-button">开始处理</button>
        <p class="result_with_style"  id="id-strpro2-result"></p>
    </div>

    <p>对象练习</p>
    <!-- mission5 -->
    <div class="mission">
        <blockquote>
            tree={"id":0,"name":"root","left":{"id":1,"name":"Simon","left":{"id":3,"name":"Carl1","left":{"id":7,"name":"Lee","left":{"id":11,"name":"Fate"}},"right":{"id":8,"name":"Annie","left":{"id":12,"name":"Saber"}}},"right":{"id":4,"name":"Tony","left":{"id":9,"name":"Candy"}}},"right":{"id":2,"name":"right","left":{"id":5,"name":"Carl2",},"right":{"id":6,"name":"Carl3","right":{"id":10,"name":"Kai"}}}};
        </blockquote>
        <label for="name-object-input">输入ID来查找NAME</label>
        <input id="id-object-input"  class="long-input" name="name-object-input" type="text">
        <button id="id-object-button">开始</button>
        <p class="result_with_style"  id="id-object-result"></p>

        <label for="name-object-input2">输入NAME来查找ID</label>
        <input id="id-object-input2"  class="long-input" name="name-object-input2" type="text">
        <button id="id-object-button2">开始</button>
        <p class="result_with_style" id="id-object-result2"></p>
        <p>二叉树排序已输出至CONSOLE</p>
    </div>

    <p>对列练习-数组右侧取值</p>
    <!-- mission6 -->
    <div class="mission">
        <input id="queue-input" class="long-input" type="text">
        <p id="queue-cont" class="result_with_style">队列内容：apple-&gt;pear</p>    
        <div id="queue-btng">
            <button data-btnfunc="queue-in-btn">入队</button>
            <button data-btnfunc="queue-out-btn">出队</button>
            <button data-btnfunc="queue-font-btn">打印队头元素内容</button>
            <button data-btnfunc="queue-empty-btn">判断队列是否为空</button>
        </div>
    </div>

    <p>对列练习-数组左侧取值</p>
    <!-- mission7 -->
    <div class="mission">
        <input id="queue-input-left" class="long-input" type="text">
        <p id="queue-cont-left" class="result_with_style">队列内容：apple&lt;-pear</p>    
        <div id="queue-btng-left">
            <button data-btnfunc="queue-in-btn">入队</button>
            <button data-btnfunc="queue-out-btn">出队</button>
            <button data-btnfunc="queue-font-btn">打印队头元素内容</button>
            <button data-btnfunc="queue-empty-btn">判断队列是否为空</button>
        </div>
    </div>

    <p>栈练习-数组右侧取值</p>
    <!-- mission8 -->
    <div class="mission">
        <input id="stack-input-right" class="long-input" type="text">
        <p id="stack-cont-right" class="result_with_style">栈内容：apple-&gt;pear</p>    
        <div id="stack-btng-right">
            <button data-btnfunc="stack-in-btn">入栈</button>
            <button data-btnfunc="stack-out-btn">出栈</button>
            <button data-btnfunc="stack-font-btn">打印栈顶元素内容</button>
            <button data-btnfunc="stack-empty-btn">判断栈是否为空</button>
        </div>
    </div>
    <p>栈练习-数组左侧取值</p>
    <!-- mission9 -->
    <div class="mission">
        <input id="stack-input-left" class="long-input" type="text">
        <p id="stack-cont-left" class="result_with_style">栈内容：apple&lt;-pear</p>    
        <div id="stack-btng-left">
            <button data-btnfunc="stack-in-btn">入栈</button>
            <button data-btnfunc="stack-out-btn">出栈</button>
            <button data-btnfunc="stack-font-btn">打印栈顶元素内容</button>
            <button data-btnfunc="stack-empty-btn">判断栈是否为空</button>
        </div>
    </div>

    <p>排序练习</p>
    <!-- mission10 -->
    <div class="mission">
        <p>sort_1 = [43, 54, 4, -4, 84, 100, 58, 27, 140];</p>
        <p>sort_2 = ['apple', 'dog', 'cat', 'car', 'zoo', 'orange', 'airplane'];</p>
        <p>sort_3 = [[10, 14], [16, 60], [7, 44], [26, 35], [22, 63]];</p>
        <p>sort_4 = [{id:1,name:"candy",value:40},{id:2,name:"Simon",value:50},{id:3,name:"Tony",value:45},{id:4,name:"Annie",value:60}];</p>
    
        <div id="sort-btng">
            <button data-btnfunc="sort1">sort1+</button>
            <button data-btnfunc="sort1_">sort1-</button>
            <button data-btnfunc="sort2">sort2+</button>
            <button data-btnfunc="sort2_">sort2-</button>
            <button data-btnfunc="sort3">sort3</button>
            <button data-btnfunc="sort4">sort4</button>
        </div>
        <p id="sort-result" class="result_with_style"></p>
    </div>

    <p>对象转数组练习</p>
    <!-- mission11 -->
    <div class="mission">
        <p>对象转数组 {"Tony":{"Math":95,"English":79,"Music":68},"Simon":{"Math":100,"English":95,"Music":98},"Annie":{"Math":54,"English":65,"Music":88}};</p>
        <p>数组转对象 [[1,"Area1",-1],[2,"Area2",-1],[3,"Area1-1",1],[4,"Area1-2",1],[5,"Area2-1",2],[6,"Area2-2",2],[7,"Area1-2-3",4],[8,"Area2-2-1",6],];</p>
        
        <div id="change-btng">
            <button data-btnfunc="change1">对象转数组</button>
            <button data-btnfunc="change2">数组转对象</button>

        </div>
        <p id="change-result" class="result_with_style"></p>
    </div>

</body>
<script src="js/mission1.js"></script>
<script src="js/mission2.js"></script>
<script src="js/mission3.js"></script>
<script src="js/mission4.js"></script>
<script src="js/mission5.js"></script>
<script src="js/mission6.js"></script>
<script src="js/mission7.js"></script>
<script src="js/mission8.js"></script>
<script src="js/mission9.js"></script>
<script src="js/mission10.js"></script>
<script src="js/mission11.js"></script>
</html>
